// 创建一个Fire烟花的构造函数
function Fire(){
    // 获取页面样式
    this.body = document.querySelector('body');
    this.span=document.querySelector("span")
  }
//  设置页面的样式，给大盒子一个点击事件
Fire.prototype.init=function(e){
  // 给页面点击事件
    // this.body.onclick=(e)=>{
      e=e||window.event;
      this.createFire(e)

    // }
  }
  // 给原型添加一个启动方法(初始化方法)
Fire.prototype.createFire=function(e){

  let x = this.span.offsetLeft;
  let y = this.span.offsetTop;
 
  //生成烟花
  let div = document.createElement('div');
  setStyle(div,{
    width: '10px',
    height: '10px',
    background: getColor(),
    position: 'absolute',
    bottom: 0,
    left: x +'px'
  })
  // 将设置好的方块烟花放到大盒子中
  this.body.appendChild(div);
  // 调用toUp方法，实现方块烟花升空 效果
  this.toUp(div,x,y)
  }
  Fire.prototype.toUp = function(ele,x,y){
    // 调用运动函数让烟花升空
      // 运动结束后，方块烟花消失
      // 在大盒子中将方块烟花移除
      this.body.removeChild(ele);
      // 调用createManyFire方法，实现创建多个小圆点烟花
      this.createManyFire(x,y);
    
  }
  Fire.prototype.createManyFire = function(x,y){
    let num = getNum(10,30);
    for(let i=0;i<num;i++){
      let div = document.createElement('div');
      // 设置样式
      setStyle(div,{
        width: '10px',
        height: '10px',
        background: getColor(),
        position: 'absolute',
        top: y + 'px',
        left: x +'px',
        borderRadius: '50%'
      })
      // 将创建的小圆点烟花添加到大盒子中
      this.body.appendChild(div);
      // 调用boom方法，实现小圆点炸开
      this.boom(div);
    }
  }
  Fire.prototype.boom = function(ele){
    // 调用move运动函数，实现小圆点烟花炸开
    move(ele,{
      top: getNum(0,this.body.clientHeight - ele.offsetHeight),
      left: getNum(0,this.body.clientWidth - ele.offsetWidth)    
    },()=>{
      // 小圆点烟花运动结束，消失
      // 在大盒子中移除小圆点烟花
      this.body.removeChild(ele);
    })
  }
  
  // 实例化烟花对象
// let fire = new Fire();
// console.log(fire);
// 实例对象调用init启动方法(初始化界面，并开始效果)
//fire.init();
